import { useEffect } from "react";
import { useDrag, useDrop } from "react-dnd"

interface MyComponentProps {
    id: string;
    handleDrop?: (a?: any, b?: any) => void;
    state?: any;
    children?: any;
    containerId: string;
}
const ItemTypes = {
    CONTAINER: 'container',
    ITEM: 'item'
};

const DraggableBOXView: React.FC<MyComponentProps> = (props) => {

    const [{ isDragging }, drage] = useDrag(() => ({
        type: ItemTypes.CONTAINER,
        item: {
            id: props.id,
            sourceContainer: props.containerId,
            type: ItemTypes.CONTAINER,
            category: "container"
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        })
    }))
    const [{ isOver }, drop] = useDrop(() => ({
        accept: ['input', 'container'],
        drop: (item: any, monitor: any) => {
            if (item.sourceContainer !== props.state) {
                props.handleDrop(item, monitor)
            }
        },
        collect: (monitor) => ({
            isOver: !!monitor.isOver(),
        }),
    }), [props.state]);
    if (isDragging) {
        return <div ref={drage}></div>
    }
    return (

        <div ref={(node) => drage(drop(node))} >
            {props.containerId == "LeftDropable" && <div>容器</div>}
            {props.containerId !== "LeftDropable" && <div className={'w-full min-h-10 inline-block  rounded  border p-3'}>{props.children}</div>}
        </div>
    )
}
export default DraggableBOXView;